<template>
  <div class="filter-container">
    <h2 class="section-title">商品筛选</h2>

    <!-- 价格范围 -->
    <el-row>
      <el-col :span="8">
        <el-slider v-model="priceRange" :min="0" :max="5000" range :step="10" show-stops>
          <span slot="tooltip" slot-scope="{ value }">{{ value }}元</span>
        </el-slider>
      </el-col>
      <el-col :span="16" class="price-range-text">
        <p>价格区间: {{ priceRange[0] }} 元 - {{ priceRange[1] }} 元</p>
      </el-col>
    </el-row>

    <!-- 商品分类 -->
    <el-row>
      <el-col :span="24">
        <el-select v-model="selectedCategory" placeholder="请选择商品分类" class="category-select" style="width: 100%;">
          <el-option
            v-for="category in categories"
            :key="category.id"
            :label="category"
            :value="category"
          />
        </el-select>
      </el-col>
    </el-row>

    <!-- 筛选按钮 -->
    <el-row>
      <el-col :span="24">
        <el-button type="primary" class="apply-button" @click="applyFilters">应用筛选</el-button>
      </el-col>
    </el-row>

    <!-- 筛选结果 -->
    <h3 class="section-title">筛选结果</h3>
    <el-row :gutter="20">
      <el-col v-for="item in filteredProducts" :key="item.id" :span="6">
        <el-card :body-style="{ padding: '20px' }" class="product-card">
          <img :src="item.image" class="product-image" alt="商品图片"/>
          <div class="product-info">
            <h4 class="product-name">{{ item.name }}</h4>
            <p class="product-price">价格：{{ item.price }}元</p>
            <p class="product-category">分类：{{ item.category }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="size"
      :total="total"
      @current-change="handlePageChange"
      layout="prev, pager, next, jumper"
      class="pagination"
    />
  </div>
</template>

<script>
export default {
  name: "Filter",
  data() {
    return {
      priceRange: [0, 5000],  // 默认价格区间
      selectedCategory: null,  // 默认未选择分类
      categories: ["食品", "生活用品", "书籍", "电子产品"],  // 商品分类
      products: [],  // 所有商品
      filteredProducts: [],  // 筛选后的商品
      total: 0,
      page: 1,
      size: 10,
      name: "",  // 商品名称搜索
    };
  },
  methods: {
    // 获取商品列表并进行过滤
    fetchProducts() {
      const params = {
        page: this.page,
        size: this.size,
        name: this.name,
        category: this.selectedCategory,
      };

      this.$http.get("product/news", { params }).then((response) => {
        if (response.data && response.data.data) {
          this.products = response.data.data;
          this.filteredProducts = this.applyPriceFilter(this.products); // 通过价格区间进行筛选
          this.total = response.data.total;
        } else {
          this.$message.error("获取商品数据失败");
        }
      }).catch((error) => {
        this.$message.error("请求失败，请稍后重试");
        console.error(error);
      });
    },

    // 筛选商品
    applyPriceFilter(products) {
      return products.filter(product => {
        return product.price >= this.priceRange[0] && product.price <= this.priceRange[1];
      });
    },

    // 点击应用筛选按钮
    applyFilters() {
      this.page = 1; // 每次筛选时，重置到第一页
      this.fetchProducts(); // 获取商品并进行筛选
    },

    handlePageChange(newPage) {
      this.page = newPage;
      this.fetchProducts(); // 处理分页变化
    },
  },
  created() {
    this.fetchProducts();  // 初始化时加载商品数据
  },
};
</script>

<style scoped>
.filter-container {
  padding: 30px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.price-range-text {
  font-size: 16px;
  color: #555;
}

.category-select {
  margin-top: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.apply-button {
  margin-top: 20px;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
}

.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.product-info {
  text-align: center;
  margin-top: 10px;
}

.product-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.product-price {
  font-size: 16px;
  color: #f56c6c;
  margin-bottom: 5px;
}

.product-category {
  font-size: 14px;
  color: #999;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
